<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">



<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<title>element组件</title>
<style>

.el-row{
margin-top:20px;
margin-bottom: 20px;

}
.el-col{
border-radius: 4px;
}
.content{
border-radius: 4px;
color:wheat;
text-align: center;
line-height: 50px;
background:#000000;
min-height: 50px;
}
.choosed{
	background: #00ffff;
	color: black;
}
.row-bg{
	padding: 10px 0;
	background-color: #f9fafc;
}

</style>

</head>
<body>
<div id="app">
<!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
<input v-model="search" style="height: 24px;"/>&nbsp;&nbsp;&nbsp;
<el-button type="primary" icon="el-icon-search" @click="searchFor">查找</el-button>
<!-- i=小数组的下表 j=它在小数组里的位置 -->
<template v-for="(group,j) in groups">

<el-row :gutter="20">
 
<el-col v-for="(student,i) in group" :span=" parseInt(24/group.length)">
	<!-- 加头像  选择元素-->
	<div v-bind:class="{choosed:student.choose}"@click="del(j,i)" class="content">
		<i class="el-icon-user"></i>
	{{student.name}}
	</div>
	</el-col>
	
</el-row>

<el-button type="primary" @click="add(group.length,j)" icon="el-icon-plus">添加学生</el-button>

</template>

</div>
<script>
new Vue({
el:'#app',
data:{
groups:[['张三','李四','王五'],['张三','李四','王五'],['张三','李四','王五']],
search:'',

},
created() {
	//箭头函数
	this.groups=this.groups.map(x=>x.map(y=>({name:y,choose:false})))
},

methods:{
	add:function(l,j){
		if(l<8){
			var name=prompt('请输入学生的名字')
			var student={name:name,choose:false};
			this.groups[j].push(student);
		}else{
			alert('每组最多8个学生')
		}
	},
	
	del:function(j,i){
		var name=this.groups[j][i].name
		if(confirm("你确定要删除："+name+"  的名字吗？")){
			this.groups[j].splice(i,1);
		}
	
	},
	searchFor:function(){
		//map方法
		this.groups.map(x=>x.map(y=>{
		
			y.choose= y.name==this.search ? true:false;
			
		}))
	}
	
}

})

</script>

</body>
</html>
